{template '../service_common/header'}

    <div class="layui-body" style="left: 0">
        <!-- 内容主体区域 -->
        <div style="padding: 20px 50px;">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:0">
                <ul class="layui-tab-title">
                    <li class="{if $_GPC['cat_id'] == 0 || !isset($_GPC['cat_id'])}layui-this{/if}" data-id="0"><a href="{php echo $this->createWebUrl('service', array('act' => 'knowledge', 'cat_id' => 0));}">全部</a></li>
                    {if $category_list}
                    {loop $category_list $index $item}
                    <li class="{if $_GPC['cat_id'] == $item['cat_id']}layui-this{/if}" data-id="{$item['cat_id']}"><a href="{php echo $this->createWebUrl('service', array('act' => 'knowledge', 'cat_id' => $item['cat_id']));}">{$item['cat_name']}</a></li>
                    {/loop}
                    {/if}
                </ul>
                <div class="layui-tab-content"></div>
            </div>
            <form class="layui-form" action="javascript:;" method="post">
                <div class="search layui-clear">
                    <div class="layui-col-xs6" style="position: relative;">
                        <img src="{KB_WEB_FRONT_IMG}/search.png" alt="" style="position: absolute;left:12px; top:9px;">
                        <input style="padding-left:40px;" type="text" name="question" required  lay-filter="zskSearch" placeholder="请输入问题或关键词" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-col-xs6">
                        <button class="layui-btn" type="button" style="width: 130px; margin-left: 20px;" id="search" lay-submit lay-filter="zskSearch">检索</button>
                    </div>
                </div>
            </form>
            <blockquote class="layui-elem-quote layui-quote-nm selectBox">
                <div class="topSelect">
                    <div class="l">您已选择：</div>
                    <div class="r" id="selected">
                        <div class="cate-list" style="display: inline-block"></div>
                        <span class="ver"></span>
                        <div class="label-list" style="display: inline-block"></div>
                    </div>
                </div>
                <div class="classList" id="fl">
                    <div class="l">二级分类：</div>
                    <div class="r ac_class">
                        {if $category_child_list}
                        {loop $category_child_list $index $item}
                            <a id="{$item['cat_id']}" href="javascript:;">{$item['cat_name']}</a>
                        {/loop}
                        {/if}
                    </div>
                    {if $category_child_list && count($category_child_list) > 24}
                    <div class="more">
                        <span>更多</span>
                        <i class="layui-icon iconBox iconBox1" style="font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe61a;</i><i class="layui-icon iconBox iconBox2" style="display: none; font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe619;</i>
                    </div>
                    {/if}
                </div>
                <div class="classList" style="border-bottom:none" id="bq">
                    <div class="l" style="padding-right: 28px">标签：</div>
                    <div class="r ac_class">
                        {if $label_list}
                        {loop $label_list $index $item}
                            <a id="{$item['label_id']}" href="javascript:;">{$item['label_name']}</a>
                        {/loop}
                        {/if}
                    </div>
                    {if $label_list  && count($label_list) > 24}
                    <div class="more">
                        <span>更多</span>
                        <i class="layui-icon iconBox iconBox1" style="font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe61a;</i><i class="layui-icon iconBox iconBox2" style="display: none; font-size: 14px; color: #aaaaaa; border:1px solid #dddddd;padding:3px;cursor: pointer;">&#xe619;</i>
                    </div>
                    {/if}
                </div>
            </blockquote>
            <p class="results">相关结果共 <b></b> 个：</p>
            <ul class="searchList">

            </ul>
            <div id="page" data-page="1" style="margin-top: 30px;text-align: center"></div>
        </div>
    </div>

    <script type="text/javascript">
        require(['jquery', 'layui', 'clipboard', 'common'], function ($, layui, Clipboard) {

            initQuestion();

            $('input[name="question"]').on('keydown', function (e) {
                if (e.keyCode === 13) {
                    var question = $(this).val();
                    if (question.length === 0) {
                        layer.msg('请输入要检索的问题', {time: 1000});
                        return false;
                    }
                    initQuestion();
                }
            })

            layui.use(['layer', 'form'], function(){
                var form = layui.form;

                //常见问题检索按钮
                form.on('submit(zskSearch)', function(){
                    var question = $('input[name="question"]').val();
                    if (question.length == 0) {
                        layer.msg('请输入要检索的问题');
                        return false;
                    }
                    initQuestion();
                });
            });

            var targetText=$("#target").text();
            var clipboard = new Clipboard('.copy_button');
            clipboard.on('success', function(e) {
                layer.msg('复制成功');
                e.clearSelection();
            });

            //已选择列表设置字体颜色
            $('.topSelect .r .ver').prevAll().find('span').css('color','#6acb54')
            $('.topSelect .r .ver').nextAll().find('span').css('color','#1b9fe4')
            //查看答案
            $('body').on('click', '.checkAnswer',function(){
                $(this).parents('.topQuestion').css('padding-bottom','0')
                $(this).parents('.topQuestion').siblings('.centerAnswer').slideDown()
            })
            //收起
            $('body').on('click','.PackUp',function(){
                $(this).parents('.centerAnswer').hide()
                $(this).parents('.centerAnswer').siblings('.topQuestion').css('padding-bottom','20px')
            })
            //点击分类
            $('#fl .r a').on('click',function(){
                selectList(1,this)
            })
            //点击标签
            $('#bq .r a').on('click',function(){
                selectList(2,this)
            })
            //删除列表
            $('body').on('click','.topSelect .r a',function(){
                var del_elem = $(this);
                $(this).remove();
                $('#fl .r a').each(function (index, elem) {
                    if ($(elem).attr('id') == del_elem.attr('id')) {
                        $(elem).removeClass('disabled');
                        $(elem).css('color', '');
                    }
                });
                $('#bq .r a').each(function (index, elem) {
                    if ($(elem).attr('id') == del_elem.attr('id')) {
                        $(elem).removeClass('disabled');
                        $(elem).css('color', '');
                    }
                });
                initQuestion();
            })
            //更多
            $('body').on('click','.iconBox',function(){
                if($(this).siblings('span').text()=='更多'){
                    $(this).parent().siblings('.r').removeClass('ac_class');
                    $(this).siblings('span').text('收起');
                    $(this).hide();
                    $(this).siblings('.iconBox2').show();
                }else if($(this).siblings('span').text()=='收起'){
                    $(this).parent().siblings('.r').addClass('ac_class');
                    $(this).siblings('span').text('更多');
                    $(this).hide();
                    $(this).siblings('.iconBox1').show();
                }
            })
        });

        //选择列表
        function selectList(type,obj){
            var $html=$(obj).text();
            var $id=$(obj).attr('id');
            var $a='<a id="'+$id+'" class="twoLevel" href="javascript:;"><span>'+$html+'</span>&times;</a>';
            if(type==1){
                $('.cate-list').append($a);
                $('.topSelect .r .ver').prevAll().find('span').css('color','#6acb54');
                $(obj).css('color', '#6acb54');
            }else if(type==2){
                $('.label-list').append($a);
                $('.topSelect .r .ver').nextAll().find('span').css('color','#1b9fe4');
                $(obj).css('color', '#1b9fe4');
            }
            $(obj).addClass('disabled');
            initQuestion();
        }

        //初始化问题数据
        function initQuestion() {
            var cat_id = "{$_GPC['cat_id']}",
                page = $('#page').attr('data-page'),
                question = $('input[name="question"]').val();

            var cat_ids = [],
                label_ids = [];

            $("#selected .cate-list a").each(function (index, elem) {
                cat_ids.push($(elem).attr('id'));
            });
            $("#selected .label-list a").each(function (index, elem) {
                label_ids.push($(elem).attr('id'));
            });

            var data = {
                cat_id: cat_id,
                page: page,
                question: question,
                cat_ids: cat_ids,
                label_ids: label_ids
            };
            $.post("{php echo $this->createWebUrl('service', array('act' => 'knowledge'));}", data, function (data) {
                $('.results b').text(data.pages.total);
                layui.use(['laypage'], function () {
                    var laypage = layui.laypage;
                    //总页数大于页码总数
                    laypage.render({
                        elem: 'page',
                        count: data.pages.total, //数据总数
                        limit: data.pages.limit,
                        curr: data.pages.page,
                        layout: ['prev', 'page', 'next', 'skip'],
                        jump: function(obj, first){
                            if (!first) {
                                var curr = obj.curr;
                                $('#page').attr('data-page', curr);
                                initQuestion();
                            }
                        }
                    });
                });

                if (data.question_list.length > 0) {
                    var html = '';
                    $.each(data.question_list, function (index, item) {
                        html += '<li>' +
                        '<div class="topQuestion">' +
                            '<div class="l">' +
                            '<img src="{KB_WEB_FRONT_IMG}/q.png" alt="">' +
                            '<div class="title">' + item.question + '</div>' +
                            '</div>' +
                            '<div class="r">' +
                            '<button class="layui-btn checkAnswer" type="button" style="width: 112px; margin-top: 30px;">查看答案</button>' +
                            '</div>' +
                            '</div>' +
                            '<div class="centerAnswer">' +
                            '<div class="content">' +
                            '<div class="l target1">' +
                            item.answer_all +
                            '</div>' +
                            '<div class="r">' +
                            '<button class="layui-btn copy_button" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b" ata-clipboard-action="copy" data-clipboard-target=".target1">复制</button>' +
                            '<button class="layui-btn PackUp" type="button" style="width: 112px; border: 1px solid #fff;background: #fff;color: #55c33b;margin-left:0;margin-top: 10px;">收起</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="bottomType">' +
                            '<span>分类：' + item.cat_name + '</span>' +
                            '<span class="hVer"></span>' +
                            '<span>标签：' + item.label_name + '</span>' +
                        '</div>' +
                        '</li>';
                    });
                    $('.searchList').html(html);
                } else {
                    $('#page').css('display', 'none');
                    $('.searchList').html('');
                }

            });
        }
    </script>

{template '../service_common/footer'}